<template>
  <el-drawer v-model="props.visible" direction="ltr" size="50%">
    <template #title>
      <span>发起：{{ props.workflowName }}</span>
    </template>
    <el-card
      shadow="never"
      class="box-card"
      style="margin-top: 10px"
      v-show="hasTaskId"
    >
      <el-card
        shadow="never"
        class="box-card"
        style="margin-top: 10px"
        v-loading="loading"
      >
        <FormRender ref="formRenderRef" @form-change="onFormChange()" />
      </el-card>
      <br />
      <ForecastHandleUser ref="forecastHandleUserRef" :task-id="taskId" />
    </el-card>

    <div style="text-align: right">
      <br />
      <el-button type="primary" @click="updateFormData">更 新</el-button>
    </div>
  </el-drawer>
</template>

<script setup>
import { defineProps, watch, ref, nextTick, onMounted, computed } from "vue";
import { useWorkTaskStore } from "@/stores/workTask";
import { useDynamicFormDesignStore } from "@/stores/dynamicFormDesign";
import ForecastHandleUser from "@/components/WorkflowDesign/FlowSimulations/ForecastHandleUser.vue";
import FormRender from "@/components/WorkflowDesign/formComponents/FormRender.vue";
const props = defineProps({
  visible: {
    default: false,
  },
  workTaskId: {
    default: "",
  },
});
const emit = defineEmits(["update:visible", "closed"]);
const loading = ref(false);

const formRenderRef = ref(null);
const forecastHandleUserRef = ref(null);
const dynamicFormDesignStore = useDynamicFormDesignStore();

const workTaskStore = useWorkTaskStore();

const workflowInfo = ref({
  workflowId: "",
  versionNo: 0,
  formData: "",
});
const hasTaskId = computed(() => {
  return props.workTaskId && props.workTaskId.length > 0;
  //   return true;
});

const taskId = computed(() => props.workTaskId);
watch(
  () => props.workTaskId,
  () => {
    load();
  }
);

watch(
  () => props.visible,
  () => {
    if (!props.workTaskId) {
      load();
    }
  }
);

const load = async () => {
  await nextTick();

  setTimeout(() => {
    formRenderRef.value.setDesignContent("", "");
    formRenderRef.value.setFormData({});
    getWorkTaskAndRendForm(props.workTaskId);
    onFormChange();
  }, 500);
};

const getWorkTaskAndRendForm = async (id) => {
  const workTask = await workTaskStore.getWorkTask({ id: id });
  workflowInfo.value.workflowId = workTask.workflowId.id;
  workflowInfo.value.versionNo = workTask.workflowId.versionNo;
  await getFormDesignVersionByTaskId(id);

  let formData = {};
  try {
    formData = JSON.parse(workTask.formData);
  } catch (e) {
    formData = {};
  }
  formRenderRef.value.setFormData(formData);
};

const getFormDesignVersionByTaskId = async (taskId) => {
  if (!taskId || taskId.length == 0) return;
  loading.value = true;
  const res = await dynamicFormDesignStore.getFormDesignVersionByWorkTaskId({
    worktaskId: taskId,
  });
  if (res) {
    formRenderRef.value.setDesignContent(
      res.designContent,
      res.designFramework
    );
  }
  loading.value = false;
};

const onFormChange = async () => {
  formRenderRef.value.validateForm(async (valid) => {
    if (valid) {
      let data = await formRenderRef.value.getFormData();
      workflowInfo.value.formData = data;
      getForecastNodeUsers4Workflow(workflowInfo.value);
    }
  });
};
const getForecastNodeUsers4Workflow = (workflowInfo) => {
  forecastHandleUserRef.value.getForecastNodeUsers4Workflow(workflowInfo);
};

const updateFormData = async () => {
  loading.value = true;
  const data = {
    id: props.workTaskId,
    formData: await formRenderRef.value.getFormData(),
  };
  workTaskStore
    .updateWorkTaskFormData(data)
    .then((res) => {
      loading.value = false;
      this.hide();
    })
    .catch((e) => {
      loading.value = false;
    });
  onClose();
};
const onClose = () => {
  emit("closed");
};
onMounted(() => {});
</script>

<style lang="less" scoped>
.el-col {
  padding: 5px;
}
.el-col .el-card {
  cursor: pointer;
}
</style>
